<template>
  <div class="dashboard-container">
    <div>
      <el-card class="box-card">
        <!-- 测试页, 这是主页面 -->
        <!-- {{ dddd }} -->
        <div id="index">
          <h3 style="width:61%;float:left">
            {{ partner_name1 }}, 大气温度变化趋势
          </h3>
          <div id="pic1" />
          <h3 style="width:61%;float:left">
            {{ partner_name2 }}, 土壤湿度变化趋势
          </h3>
          <div id="pic3" />
        </div>
        <!-- {{ userinfo }} -->
      </el-card>
    </div>
  </div>
</template>

<script>
// import { parseTime } from '@/utils'
var echarts = require('echarts')

import odoo from '@/odooapi'

export default {
  name: 'Dashboard',
  components: {},
  data() {
    return {
      userinfo: {},
      data_wd: [],
      data_sd: [],
      partner_name1: '',
      partner_name2: ''
    }
  },
  computed: {},
  async created() {
    // this.PicInit()
  },
  mounted() {
    // 初始化
    this.PicInit()
  },
  methods: {
    PicInit() {
      this.PicInit_1()
      this.PicInit_3()
    },

    async PicInit_1() {
      var p1 = echarts.init(document.getElementById('pic1'))
      // var base = +new Date(2019, 9, 3)
      // var oneDay = 24 * 3600 * 1000
      // var date = []

      // var data = [Math.random() * 40]

      // for (var i = 1; i < 100; i++) {
      //   var now = new Date((base += oneDay))
      //   date.push(
      //     [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
      //   )
      //   data.push(Math.round((Math.random() - 0.5) * 10 + data[i - 1]))
      // }

      const data0 = await odoo.env('soil.test.line').search()
      const data2 = data0.filter(item => item.partner_id === 4)
      this.partner_name1 = `${data2[0].country_id__name},${data2[0].state_id__name},${data2[0].partner_id__name}`
      // console.log('sss,', data2)
      const data3 = data2.filter(item => item.item_id === 1)
      // const data4 = data2.filter(item => item.item_id === 2)
      const data_wd = data3.map(item => {
        return { date: item.date, value: item.value }
      })

      // const data_sd = data4.map(item => {
      //   return { date: item.date, value: item.value }
      // })

      const date = data_wd.map(item => item.date)
      const data = data_wd.map(item => item.value)

      var option = {
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },
        series: [
          {
            name: '大气温度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: 'rgb(149, 212, 255)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(162, 217, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 255, 255)'
                  // color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      }
      p1.setOption(option)
    },
    async PicInit_3() {
      var p1 = echarts.init(document.getElementById('pic3'))
      // var base = +new Date(2019, 9, 3)
      // var oneDay = 24 * 3600 * 1000
      // var date = []

      // var data = [Math.random() * 300]

      // for (var i = 1; i < 100; i++) {
      //   var now = new Date((base += oneDay))
      //   date.push(
      //     [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')
      //   )
      //   data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]))
      // }

      const data0 = await odoo.env('soil.test.line').search()
      const data2 = data0.filter(item => item.partner_id === 5)
      this.partner_name2 = `${data2[0].country_id__name},${data2[0].state_id__name},${data2[0].partner_id__name}`
      // console.log('sss,', data2)
      // const data3 = data2.filter(item => item.item_id === 1)
      const data4 = data2.filter(item => item.item_id === 2)
      // const data_wd = data3.map(item => {
      //   return { date: item.date, value: item.value }
      // })

      const data_sd = data4.map(item => {
        return { date: item.date, value: item.value }
      })

      const date = data_sd.map(item => item.date)
      const data = data_sd.map(item => item.value)

      var option = {
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
        },
        yAxis: {
          type: 'value',
          boundaryGap: [0, '100%']
        },

        series: [
          {
            name: '土壤湿度',
            type: 'line',
            smooth: true,
            symbol: 'none',
            sampling: 'average',
            itemStyle: {
              color: 'rgb(149, 212, 255)'
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(162, 217, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(255, 255, 255)'
                  // color: 'rgb(255, 70, 131)'
                }
              ])
            },
            data: data
          }
        ]
      }
      p1.setOption(option)
    }
  }
}
</script>
<style>
#pic1 {
  width: 60%;
  height: 350px;
  /* margin-top: 1%; */
  margin-bottom: 10px;
  padding: 1px;
  float: left;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef;
}

#pic3 {
  /* width: 47%;
  height: 350px;
  float: left;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef; */

  width: 60%;
  height: 350px;
  /* margin-top: 1%; */
  margin-bottom: 100px;
  padding: 1px;
  float: left;
  border: 1px solid snow;
  border-radius: 20px;
  box-shadow: 0 0 10px #f1efef;
}
</style>
